/*
props
{
  class: 'a b',
  style: {
    color: 'red',
    fontSize: '14px',
  },
  onClick: () => console.log('click'),
  checked: '',
  custom: false
}
*/
const domPropsRE = /[A-Z]|^(value|checked|selected|muted|disabled)$/;
export function patchProps(oldProps, newProps, el) {
    // 属性复用
    if (oldProps === newProps) {
        return
    }

    oldProps = oldProps || {}
    newProps = newProps || {}
    for (const key in newProps) {
        if (key === 'key') {
            continue
        }
        const next = newProps[key]
        const prev = oldProps[key]

        // 属性更改，给属性打补丁
        if (prev !== next) {
            patchDomProp(prev, next, key, el)
        }
    }
    // 如果新的props里面没有旧的props原有的属性，就把该属性移除
    for (const key in oldProps) {
        if (key !== 'key' && newProps[key] == null) {
            patchDomProp(oldProps[key], null, key, el)
        }
    }
}

export function patchDomProp(prev, next, key, el) {
    switch (key) {
        case 'class':
            el.className = next || ''
            break;
        case 'style':
            if (next == null) {
                el.removeAttribute('style')
            } else {
                for (const styleName in next) {
                    el.style[styleName] = next[styleName]
                }
                // 存在这种情况，所以添加完属性后，要把之前的属性情况
                // prev{
                //     color:'red'
                // }
                // next{
                //     border:'1px solid'
                // }
                if (prev) {
                    for (const key in prev) {
                        if (next[styleName] == null) {
                            el.style[styleName] = ''
                        }
                    }
                }
            }
            break;

        default:
            // 处理事件绑定
            if (/^on[^a-z]/.test(key)) {
                // 拿到事件名字
                const eventName = key.slice(2).toLowerCase()
                if (prev) {
                    el.removeEventListener(eventName, prev)
                }
                if (next) {
                    el.addEventListener(eventName, next)
                }
            } else if (domPropsRE.test(key)) {
                // 如果匹配到正则，则说明可以使用.key的形式给DOM添加属性
                // 如果是<input type="checkbox" checked> checked不是以键值对的形式存在，会被解析成{checked:''} 所以在这里特殊处理
                if (next === '' && typeof el[key] === 'boolean') {
                    next = true
                }
                el[key] = next
            } else {
                // 否则只能使用setAttribute自定义添加属性
                // 使用setAttribute有一点弊端，如果设置的为值为false或者其他非字符串值，则获取的值都是对应的字符串
                if (next == null || next === false) {
                    el.removeAttribute(key)
                } else {
                    el.setAttribute(key, next)
                }
            }
            break;
    }
}